/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React from "react";
import { Row, Col, Icon } from "antd";
import PropTypes from "prop-types";
import classNames from "classnames";
import styles from "./MenuItem.less";

const MenuItem = props => {
  const { menuData = {}, onClick, checked, showBorder = true, showBg = true } = props;
  const { name } = menuData;

  const click = () => {
    onClick && onClick({ ...menuData, checked });
  };

  const classname = classNames(styles.menuItem, {
    [styles.itemChecked]: checked,
    [styles.bg]: showBg,
  });

  return (
    <div className={classname}>
      <div
        className={classNames(styles.menuItem__wrapper, {
          [styles.borderBottom]: showBorder,
        })}
        onClick={click}
      >
        <Row type="flex" justify="space-between" align="middle">
          <Col className={styles.menuItem__name} style={{ flex: 1, marginRight: 2 }}>
            {name}
          </Col>
          <Col className={styles.menuItem__icon}>
            <Icon type="form" />
          </Col>
        </Row>
      </div>
    </div>
  );
};

MenuItem.propTypes = {
  menuData: PropTypes.object.isRequired,
  onClick: PropTypes.func.isRequired,
  checked: PropTypes.bool.isRequired,
};

export default React.memo(MenuItem);
